<template>
    <div class="body">
        <div class="info">
            <mt-cell title="单位名称:">
                <template v-if="$store.getters.userInfo.status !== 2">
                    {{userInfo.company_name}}
                </template>
                <input type="text" class="input" v-model="userInfo.company_name" v-else>
            </mt-cell>
            <mt-cell title="法定代表人:">
                <template v-if="$store.getters.userInfo.status !== 2">
                    {{userInfo.legal_name}}
                </template>
                <input type="text" class="input" v-model="userInfo.legal_name" v-else>
            </mt-cell>
            <mt-cell title="经营地址:">
                <template v-if="$store.getters.userInfo.status !== 2">
                    {{userInfo.address}}
                </template>
                <input type="text" class="input" v-model="userInfo.address" v-else>
            </mt-cell>
            <mt-cell title="经营范围:">
                <template v-if="$store.getters.userInfo.status !== 2">
                    {{userInfo.company_name}}
                </template>
                <!-- <input type="text" class="input" v-model="userInfo.scope_ids"> -->
                <input type="text" placeholder="经营范围【经营范围之间采用英文逗号','隔开】" v-model="scope_names" readonly @click="onShowScope" class="input" v-else>
                </mt-cell>
            <mt-cell title="有效期至:">
                <template v-if="$store.getters.userInfo.status !== 2">
                    {{userInfo.cert_validity}}
                </template>
                <input type="date" class="input" v-model="userInfo.cert_validity" v-else>
            </mt-cell>
        </div>
        <div class="info">
            <mt-cell title="商家资质信息"></mt-cell>
            <div class="img_content">
                <img :src="$store.getters.base_url+userInfo.cert_pic" alt="" class="info_img">
                <img :src="$store.getters.base_url+userInfo.allow_pic" alt="" class="info_img">
            </div>
            <div class="img_content upload_box" v-if="$store.getters.userInfo.status == 2">
                    <Upload title="营业执照" @getImg="getImg"></Upload>
                    <Upload title="经营许可证" @getImg="getImg"></Upload>
            </div>
        </div>
        <section class="login_message" v-if="$store.getters.userInfo.status == 2">
            <mt-button class="btn" @click="editStore">提交</mt-button>
        </section>
        <mt-popup v-model="scopeShow" position="bottom">
            <mt-checklist title="选择经营范围" v-model="scope_names" :options="scopesList" @change="selectScope"></mt-checklist>
        </mt-popup>
    </div>
</template>
<script>
import Upload from "../components/upload";
import {EditStore,scopeList} from '../api'
import {verUserInfo} from '../verify'
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            userInfo:{},
            scopeShow:false,
            scope_names:[],
            scopesList:[]
        }
    },
    created(){
        this.userInfo = this.$store.getters.userInfo
        this.getScopeList();
    },
    methods:{
        getScopeList(){
            scopeList().then(res=>{
                // console.log(res);
                let scopesList = [];
                for(let i of res.data){
                    scopesList.push(i.name);
                }
                this.scopeList = res.data;
                this.scopesList = scopesList;
            })
        },
        selectScope(){
            let scope_ids = [];
            for(let i of this.scope_names){
                for(let a of this.scopeList){
                    if(i == a.name){
                        scope_ids.push(a.id);
                    }
                }
            }
            this.userInfo.scope_ids = scope_ids.toString();
        },
        onShowScope(){
            this.scopeShow = !this.scopeShow;
        },
        editStore(){
            let data = this.userInfo;
            data.token=this.$store.getters.token
            if(!verUserInfo(data)) return;
            EditStore(data).then(res=>{
                console.log(res)
            })
        },
        getImg(data){
            switch(data[1]){
                case "营业执照":
                    this.userInfo.cert_pic = data[0]
                break;
                case "经营许可证":
                    this.userInfo.allow_pic = data[0]
                    break;
            }
        }
    },
    components: { Upload }
}
</script>
<style scoped>
    .body{
        background: #ddd;
        height: Calc(100vh - 3rem)
    }
    .body::before{
        display: table;
        content: "";
    }
    .info{
        width: 90%;
        margin: 1rem auto;
        border-radius: 10px;
        background: #fff;
    }
    .info>a:first-child{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .info>a:last-child{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .info::after{
        display: table;
        content: "";
    }
    .img_content{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 1.5rem;
        position: relative;
    }
    .info_img {
        width: 40%;
        height: 8rem;
        border-radius: 5px;
    }
    .upload_box{
        margin-top: -10rem;
        opacity: 0;
    }
    .btn{
        background: #F0463C;
        color: #fff;
    }
</style>